<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11-vuex mutations对象风格的提交方式</title>
</head>
<body>
    <div id="app">
        <button @click="showStore">显示仓库的内容</button>
        <h1>{{this.$store.state.num}}</h1>
        <button @click="add">加</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vuex/dist/vuex.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
        //创建仓库
        let store = new Vuex.Store({
            state:{
                num:888,
            },
            //改变值的操作
            mutations:{
                //{ type:"increment",payload:{count}}
              increment:function(state,{payload}){
                   state.num+= payload.count;
              }
            }
        })
        let vm = new Vue({
             /* 3. 配置仓库 */
            store,
            el:"#app",
            methods: {
                showStore:function(){
                 console.log(this.$store);
                 
                },
                add:function(){
                    this.$store.commit({
                       type:"increment",
                       payload:{
                           count:10
                       }
                    })
                }
            },
        })
    </script>
</body>
</html>